<template>
  <div>
    <hr>
    <h1>第一个子组件</h1>
    <sunCom />
    <button @click="turnTwo"> 传参</button>
    <input type="text">
    <h1>混入的数据：{{ msg }}--{{ myage }}</h1>
    <transition
      enter-class="animate_animated animate__backInLeft"
      leave-class="animate_animated animate__backOutRight"
    >
      <!-- name="动画名"、
       fade-enter 今日 fade-leave离开
       fade-enter-active 进入瞬间  fade-leave-active 离开瞬间 自己写动画 -->
      <p v-if="flag" style="background: darkgoldenrod;width: 200px; height: 300px;">你好</p>
    </transition>
    <button @click="flag=!flag">改变</button>

    <hr>
  </div>
</template>
<script>
import baseCom from './baseCom'
import sunCom from './sun.vue'
export default {
  components: { sunCom },
  mixins: [baseCom], // 混入组件要用的内容
  data() {
    return {
      flag: true,
      msg: '今天星期三'
    }
  },
  created() {
    console.log('本组件的生命周期')
  },
  methods: {
    turnTwo() {
      // 如地址上设置的/:id 用params传参
      this.$router.push({ name: 'commtwo', params: { id: 1 }})
      // query 会在地址栏中显示 刷新不丢失
      // 类似get传参

      this.$router.push({ name: 'commtwo', query: { pid: 1 }})
    }
  }
}
</script>
<style lang="scss">
  .fade-enter{ //-enter 进入
   opacity: 1;
   transition: all 1s;
  }
  .fade-leave{ //-leave离开
   opacity: 0;
   transition: all 1s;
  }
</style>
